<template>
  <div class="hore-list">
    <!-- <button class="btn btn-primary">添加英雄</button> -->
    <!-- router-link默认是a标签用tag改为按钮，a也可以用。$router.push也可以跳转 -->
    <router-link tag="button" to="/hore/add" class="btn btn-primary">添加英雄</router-link>
    <hr />
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="horeList.length==0">
          <td colspan="5" style="text-align:center">暂无数据</td>
        </tr>
        <tr v-for="item in horeList" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.horeName}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.time|formaTime}}</td>
          <td>
            <button
              @click="$router.push('/hore/edit/'+item.id)"
              class="btn btn-success"
              style="margin-right:10px"
            >编辑</button>
            <button @click="delHore(item.id)" class="btn btn-danger">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import moment from "moment";
import axios from "axios";
export default {
  created() {
    this.getHoreList();
  },
  data() {
    return {
      horeList: []
    };
  },
  methods: {
    getHoreList() {
      axios.get("http://localhost:3000/hore").then(res => {
        console.log(res);
        this.horeList = res.data;
      });
    },
    delHore(id) {
      if (confirm("您确定真的要删除我吗？")) {
        axios.delete(`http://localhost:3000/hore/${id}`).then(() => {
          this.getHoreList;
        });
      }
    }
  },
  filters: {
    formaTime(time) {
      return moment(new Date(time)).format("YYYY-MM-DD  HH:mm:SS");
    }
  }
};
</script>>
